<template>
  <view class="phone-wrapper" >
    <view class="content-wrapper">
      <u--form labelPosition="left" label-width="70px" ref="formRef" :model="formData">
       <!-- 手机号 -->
        <u-form-item :label="phoneText" prop="mobile">
          <u--input
            class="f-input"
            type="number"
            border="bottom"
            placeholder="请输入手机号"
            clearable
            v-model="formData.mobile"
            :readonly="phoneReadonly"
          />
        </u-form-item>
        <!-- 验证码 -->
        <u-form-item label="验证码" prop="smsCode">
          <u-input placeholder="请输入验证码" border="bottom" type="number" clearable v-model="formData.smsCode">
            <template slot="suffix">
              <u-code
                ref="uCode"
                changeText="X秒重新获取"
                :seconds="seconds"
                @start="startCode"
                @end="endCode"
                @change="text => codeBtnText = text">
              </u-code>
              <u-button
                type="primary"
                :custom-style="{ height: '32px' }"
                :text="codeBtnText"
                :disabled="!canGetCode"
                @click="getCode">
              </u-button>
            </template>
          </u-input>
        </u-form-item>
      </u--form>
    </view>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
  import loginMixin from '@/mixins/login'
  import smsCode from '@/mixins/smsCode'
  import {
    mapGetters,
    mapState
  } from 'vuex'
  export default {
    mixins: [loginMixin, smsCode],
    props: {
      type: {
       	type: String,
				default: ''
      },
    },
    watch: {
      type: {
        immediate: true,
        handler(val) {
          if(val === 'phone') {
            this.requestUrl = '/api-uaa/validata/smsCode'
            this.formData.mobile = this.getPeronalInfo.mobile || ''
            this.phoneText = '原手机号'
            this.phoneReadonly = true
          } else if(val === 'bind') {
            this.requestUrl = '/api-uaa/common/validata/smsCode'
            this.phoneText = '新手机号'
          } else {
            this.requestUrl = '/api-uaa/validata/smsCode'
            this.formData.mobile = this.getPeronalInfo.mobile || ''
            this.phoneText = '手机号'
            this.phoneReadonly = true
          }
        }
      },
      formData: {
        immediate: true,
        deep: true,
        handler(val) {
          let data = {
            deviceId: this.pageDeviceId,
            mobile: val.mobile,
            smsCode: val.smsCode
          }
          if(val.mobile && val.smsCode.length > 3) {
            data['isNext'] = true
            this.$emit('handleNext',data)
          } else {
            data['isNext'] = false
            this.$emit('handleNext',data)
          }
        }
      }
    },
    data() {
      return {
        phoneText: '手机号',
        phoneReadonly: false,
        formData: {
          mobile: '',
          smsCode: '',
        },
        rules: {
          mobile: [{
              required: true,
              message: '请输入手机号',
              trigger: ['change', 'blur'],
            },
            {
              validator: (rule, value, callback) => {
                return uni.$u.test.mobile(value);
              },
              message: '手机号码不正确',
              trigger: ['change', 'blur'],
            }
          ],
          smsCode: [{
            required: true,
            min: 4,
            message: '请输入短信验证码',
          }],
        },
        requestUrl: '',
        pageDeviceId: '8583f3ec-2d94-0cf9-d49c-97750c9090eb'
      }
    },
    computed: {
      // ...mapState('user', ['deviceId']),
      ...mapGetters('global', ['getSystemInfo']),
      ...mapGetters('user', ['getPeronalInfo'])
    },
    methods: {
      // 获取短信验证码接口
      async getCodeApi() {
        // const {
        //   deviceId
        // } = this
        const {
          mobile: phone
        } = this.formData
        return this.$request({
          url: this.requestUrl,
          data: {
            deviceId: this.pageDeviceId,
            phone
          }
        })
      },
    },
    onReady() {
      this.$refs.formRef.setRules(this.rules)
      this.codeBtnText = '获取'
    },
  }
</script>

<style lang="scss" scoped>
  .phone-wrapper {
    background: #fff;
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    margin-bottom: 20rpx;

    .content-wrapper {
      padding: 32rpx;
    }
  }
</style>